<template>
	<view class="uni-menu-group">
		<view class="uni-menu-group__title" name="title" :style="{ paddingLeft: paddingLeft }">{{ title }}</view>
		<slot></slot>
	</view>
</template>

<script>
import rootParent from '../uni-nav-menu/mixins/rootParent.js'

export default {
	name: 'uniMenuGroup',
	mixins: [rootParent],
	props: {
		title: String
	},
	data() {
		return {}
	},
	computed: {
		paddingLeft() {
			return 20 + 20 * this.rootMenu.SubMenu.length + 'px'
		}
	},
	created() {
		this.init()
	},
	methods: {
		init() {
			this.rootMenu = {
				SubMenu: []
			}
			this.getParentAll('SubMenu', this)
		}
	}
}
</script>

<style>
.uni-menu-group {
	/* border: 1px red solid; */
}
.uni-menu-group__title {
	line-height: 36px;
	font-size: 12px;
	color: #999;
}
</style>
